﻿
@{
    ViewData["Title"] = "BinMenuView";
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link href="~/layui/lib/layui-v2.6.3/css/layui.css" rel="stylesheet" />
    <link href="~/layui/css/public.css" rel="stylesheet" />
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
    <div class="box" style="width:100%;">
        <div class="" style="width: 65%; margin: 0 auto; ">
            <div id="test4" class="demo-transfer"></div>
            <div class="layui-form-item" style="margin-top:10px">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">绑定</button>
                </div>
            </div>
        </div>
    </div>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/layui/lib/layui-v2.6.3/layui.js"></script>
    <script src="~/layui/js/lay-module/tableSelect/tableSelect.js"></script>
    <script>
        layui.use(['transfer', 'layer', 'util', 'form'], function () {
            var $ = layui.$
                , transfer = layui.transfer
                , form = layui.form
                , util = layui.util;
            //获取角色id
            var RoleInfoId = GetQueryString("id");
            //封装GetQueryString()方法来获取URL后面的value值
            function GetQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null)
                    return decodeURI(r[2]);
                return null;
            }

            //渲染数据
            $.ajax({
                url: "/RoleInfo/getBinMenu_Role?roleId=" + RoleInfoId,
                type: "get",
                success: function (res) {
                    console.log(res)
                    //显示数据
                    transfer.render({
                        elem: '#test4'
                        , data: res.data.menu 
                        , title: ['备选菜单', '已选菜单']
                        , showSearch: true
                        , id: 'demo1' //定义索引
                        , value: res.data.selectedMenu //已选数据
                    })
                }
            })


            console.log(RoleInfoId)
            //监听绑定
            form.on('submit(saveBtn)', function () {
                //获得右侧数据
                var getData = transfer.getData('demo1');

                //获取用户id
                var userIds = [];
                for (var i = 0; i < getData.length; i++) {
                    userIds[i] = getData[i].value;
                }
                //发送请求
                $.ajax({
                    url: "/RoleInfo/BinMenu_Role",
                    type: "Post",
                    data: {
                        roleId: RoleInfoId,
                        menuId: userIds
                    },
                    success: function (res) {
                        layer.alert(res.msg, { icon: 1 })
                    }
                })
            });

        });
    </script>

</body>
</html>


